{% extends "base.html" %}

{%load util_tags%}

{%block title%}
	DigiChef
{%endblock title%}

{%block styles%}
	<!-- for search box-->
	<link rel="stylesheet" href="/media/css/TextboxList.css" type="text/css" media="screen" charset="utf-8" />
	<link rel="stylesheet" href="/media/css/TextboxList.Autocomplete.css" type="text/css" media="screen" charset="utf-8" />
{%endblock styles%}

{%block scripts%}
	<!-- mootools framework -->
	<script type="text/javascript" charset="utf-8" src="/media/scripts/mootools-1.2.1-core-yc.js"></script> 
	<script type="text/javascript" charset="utf-8" src="/media/scripts/mootools-1.2.2.2-more.js"></script>
	<!-- for searchbox-->
	<script src="/media/scripts/GrowingInput.js" type="text/javascript" charset="utf-8"></script>
	<script src="/media/scripts/TextboxList.js" type="text/javascript" charset="utf-8"></script>		
	<script src="/media/scripts/TextboxList.Autocomplete.js" type="text/javascript" charset="utf-8"></script>
	<script src="/media/scripts/TextboxList.Autocomplete.Binary.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		//<![CDATA[

		window.addEvent('load', function(){

			// Autocomplete initialization
			var t4 = new TextboxList('form_tags_input_3', {unique: true, plugins: {autocomplete: {}}});
			{%for tag in recipe.tags%}
				t4.add('{{tag}}');
			{%endfor%}

			t4.container.addClass('textboxlist-loading');													 
			new Request.JSON({url: 'api/json_tags', onSuccess: function(r){
				t4.plugins['autocomplete'].setValues(r);
				t4.container.removeClass('textboxlist-loading');
			}}).send();														 

		});
		//]]>
	</script> 
{%endblock scripts%}

{% block content%}	
	<!--menubar code; modified from source: http://13styles.com/css-menus/wax/-->
	<div class="orange">
        <div id="waxcontainer">
			<div id="waxnav">
			<ul>
				<li><a href="/" title="" class="current"><span>Home</span></a></li>
				{%if user.is_authenticated%}
					<li><a href="/profiles/{{user.username}}" title=""><span>My Profile</span></a></li>
				{%endif%}
				<li><a href="" title=""><span>About Us</span></a></li>
			</ul>
			</div>
        </div>
	</div>	
	<div id='search-wrapper'>
		<form action="{%url recipe_tag recipe.id%}" accept-charset="utf-8" method="post">
			<div class="form_friends">
				<input type="text" name="tags" value="" id="form_tags_input_3" />
				<input type="submit" value="Apply Tags" id="submitform" />
				<div class="clear"></div>
			</div>
		</form>
	</div>
{% endblock %}
